<script setup lang="ts">
import { getCurrentInstance } from '@tarojs/taro';
import { formatTimestampStr } from '/@/utils/time';
import QRCode from 'qrcode';
import { onMounted, ref } from 'vue';
/**
 * @description 当前路由信息
 */
const params = getCurrentInstance().router?.params as unknown as {
  plateNo: string;
  startUseTime: string;
  endUseTime: string;
  qrCode: string;
};
const qrCodeUrl = ref('');
onMounted(() => {
  QRCode.toDataURL(params.qrCode).then((url) => {
    qrCodeUrl.value = url;
  });
});
</script>
<template>
  <view class="car-apply-detail app-page--1">
    <app-navbar title="用车码" />
    <scroll-view class="app-page__wrapper" :scroll-y="true" :lower-threshold="100">
      <view class="car-apply-detail__wrapper">
        <view class="car-apply-detail__title">{{ decodeURI(params.plateNo) }}</view>
        <view class="car-apply-detail__sub-title"
          >{{ formatTimestampStr(params.startUseTime, 'YYYY-MM-DD HH:mm') }}至{{
            formatTimestampStr(params.endUseTime, 'YYYY-MM-DD HH:mm')
          }}</view
        >
        <view class="car-apply-detail__img-container">
          <image class="car-apply-detail__img-container__img" :src="qrCodeUrl" />
        </view>
        <view class="car-apply-detail__verify">验证码:&nbsp;&nbsp;{{ params.qrCode }}</view>
      </view>
    </scroll-view>
  </view>
</template>
<style lang="scss">
.car-apply-detail {
  &__wrapper {
    margin: 20px 20px 80px;
    background-color: #fff;
    border-radius: 16px;
  }
  &__title {
    color: #333;
    font-size: 44px;
    font-weight: bold;
    text-align: center;
    padding-top: 40px;
  }
  &__sub-title {
    color: #999;
    font-size: 28px;
    text-align: center;
    padding: 20px 0;
  }
  &__verify {
    color: #333;
    font-size: 44px;
    text-align: center;
    font-weight: bold;
    padding-top: 20px;
    padding-bottom: 40px;
  }
  &__img-container {
    margin-top: 14px;
    display: flex;
    justify-content: center;
    &__img {
      display: inline-block;
      width: 446px;
      height: 446px;
      background: #ccc;
    }
  }
}
</style>
